<template>
    <div class="all-order">
        <page-main>
            <div class="flc">
                <h3 style="margin-right: auto;">用户筛选</h3>
                <el-button type="primary" icon="el-icon-search" class="my-btn" @click="_getOrderList()">搜索</el-button>
            </div>
            <el-form ref="search" :model="search" label-width="80px" size="small">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单号">
                            <el-input v-model="search.ordersn" placeholder="请输入用户名" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号">
                            <el-input v-model="search.mobile" placeholder="请输入手机号" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="下单时间">
                            <el-date-picker
                                v-model="search.joinTime"
                                size="small"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @change="changeTime"
                            />
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="12">
                        <el-form-item label="最后登录">
                            <el-date-picker
                                v-model="search.LoginTime"
                                size="small"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>-->
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="选择来源">
                            <el-radio-group v-model="search.source">
                                <el-radio-button :label="6">全部</el-radio-button>
                                <el-radio-button :label="1">苹果APP</el-radio-button>
                                <el-radio-button :label="2">安卓APP</el-radio-button>
                                <el-radio-button :label="3">公众号</el-radio-button>
                                <el-radio-button :label="4">小程序</el-radio-button>
                                <el-radio-button :label="0">未知</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单状态">
                            <el-radio-group v-model="search.status">
                                <el-radio-button label="6">全部</el-radio-button>
                                <el-radio-button label="0">待支付</el-radio-button>
                                <el-radio-button label="1">待响应</el-radio-button>
                                <el-radio-button label="2">待确认</el-radio-button>
                                <el-radio-button label="3">已完成</el-radio-button>
                                <el-radio-button label="4">已关闭</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单类型">
                            <el-radio-group v-model="search.type">
                                <el-radio-button label="6">全部</el-radio-button>
                                <el-radio-button label="0">图文</el-radio-button>
                                <el-radio-button label="1">电话</el-radio-button>
                                <el-radio-button label="2">文书</el-radio-button>
                                <el-radio-button label="3">律师函</el-radio-button>
                                <el-radio-button label="4">案件委托</el-radio-button>
                                <el-radio-button label="5">企业服务</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="问题关键词" label-width="100px">
                            <el-input v-model="search.description" placeholder="请输入关键词" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="用户标签">
                            <el-checkbox-group v-model="search.tag_ids" @change="changeTag">
                                <el-checkbox v-for="tag in tagList" :key="tag.id" :label="tag.id">{{ tag.name }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flc">
                <h3 style="margin-right: auto;">订单列表</h3>
                <el-button type="primary" class="my-btn">导出信息</el-button>
            </div>
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f2f2f2',color:'#555',textAlign: 'center'}"
                border
                style="width: 100%;"
            >
                <el-table-column label="用户名/地区" align="left" width="240">
                    <template slot-scope="scope">
                        <div class="over-hidden">
                            <img class="avatar" :src="scope.row.avatar || require('../../assets/images/logo.png')" alt="">
                            <div class="info">
                                <div class="top">
                                    <svg-icon v-if="scope.row.source == 1" name="ios" />
                                    <svg-icon v-if="scope.row.source == 2" name="android" />
                                    <svg-icon v-if="scope.row.source == 0" name="question" />
                                    <svg-icon v-if="scope.row.source == 4" name="mini-program" />
                                    <svg-icon v-if="scope.row.source == 3" name="weixin" />
                                    <span style="padding-left: 5px;">{{ scope.row.nickname || '无名' }}</span>
                                    <el-tag v-if="scope.row.ismember === 1" size="mini" effect="dark" color="#5482ee" style="border-color: transparent; margin-left: 5px;">VIP</el-tag>
                                </div>
                                <div class="bot">{{ scope.row.province }}-{{ scope.row.city }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="费用" align="center">
                    <template slot-scope="scope">
                        <div>
                            <svg-icon name="rmb" />{{ scope.row.price }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="接单团队" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="over-hidden">
                            <img class="avatar" :src="scope.row.team_avatar || require('../../assets/images/logo.png')" alt="">
                            <div class="info">
                                <div class="top">
                                    <span style="padding-left: 5px;">{{ scope.row.team_name || '无名' }}</span>
                                    <!--<el-tag v-if="scope.row.ismember === 1" size="mini" effect="dark" color="#5482ee" style="border-color: transparent; margin-left: 5px;">VIP</el-tag>-->
                                </div>
                                <div class="bot">{{ scope.row.office_name }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center" />
                <el-table-column label="下单时间/律师响应" align="center" width="180">
                    <template slot-scope="scope">
                        <div>{{ scope.row.create_time }}</div>
                        <div v-if="scope.row.take_time">{{ scope.row.take_time }}</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column label="服务内容" align="center">
                    <template slot-scope="scope">
                        <div>
                            <!--<svg-icon name="rmb" />{{ scope.row.balance || 0 }}-->
                            <el-tag v-if="scope.row.type === 0" type="info">图文咨询</el-tag>
                            <el-tag v-else-if="scope.row.type === 1" type="info">电话咨询</el-tag>
                            <el-tag v-else-if="scope.row.type === 2" type="info">文书服务</el-tag>
                            <el-tag v-else-if="scope.row.type === 3" type="info">律师函</el-tag>
                            <el-tag v-else-if="scope.row.type === 4" type="info">案件委托</el-tag>
                            <el-tag v-else-if="scope.row.type === 5" type="info">企业服务</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-tag v-if="scope.row.status === 0" type="warning">待付款</el-tag>
                            <el-tag v-else-if="scope.row.status === 1" type="info">待响应</el-tag>
                            <el-tag v-else-if="scope.row.status === 2">待确认</el-tag>
                            <el-tag v-else-if="scope.row.status === 3" type="success">已完成</el-tag>
                            <el-tag v-else-if="scope.row.status === 4" type="danger">已关闭</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleClick(scope.row, 0)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="total"
                @handle-size-change="handleSizeChange"
                @handle-current-change="handleCurrentChange"
            />
        </page-main>
        <!-- 详情 -->
        <el-dialog title="提示" :visible.sync="detailDialog" width="60%" @close="detailDialogClose">
            <span slot="title" class="dialog-title">
                <span>订单详情-</span>
                <span v-if="currentDetail.status === 0" style="color: #f56c6c;">待支付</span>
                <span v-if="currentDetail.status === 1" style="color: #f56c6c;">待响应</span>
                <span v-if="currentDetail.status === 2" style="color: #e6a23c;">待确认</span>
                <span v-if="currentDetail.status === 3" style="color: #67c23a;">已完成</span>
                <span v-if="currentDetail.status === 4" style="color: #909399;">已关闭</span>
                <span v-if="serveTime">-</span>
                <span v-if="serveTime" style="color: #909399;">服务耗时-{{ serveTime }}</span>
                <br>
                <span style="color: #909399; font-size: 14px; font-weight: normal;">订单号 1234564679879</span>
            </span>
            <div class="det-content">
                <div class="left">
                    <div class="left-avatar">
                        <el-avatar :src="currentDetail.avatar" />
                        <el-tag size="mini" style="margin: 0 5px;">VIP</el-tag>
                        <svg-icon v-if="currentDetail.source == 1" name="ios" />
                        <svg-icon v-if="currentDetail.source == 2" name="android" />
                        <svg-icon v-if="currentDetail.source == 0" name="question" />
                        <svg-icon v-if="currentDetail.source == 4" name="mini-program" />
                        <svg-icon v-if="currentDetail.source == 3" name="weixin" />
                        <span style="margin: 0 5px;">{{ currentDetail.nickname }}-</span>
                        <span>{{ currentDetail.mobile }}</span>
                        <span v-if="currentDetail.province">{{ currentDetail.province }}-{{ currentDetail.city }}</span>
                    </div>
                    <div class="block" style="margin-left: 10%; margin-top: 6%;">
                        <el-timeline>
                            <el-timeline-item
                                v-for="(activity, index) in activities"
                                :key="index"
                                :icon="activity.icon"
                                :type="activity.type"
                                :color="activity.color"
                                :size="activity.size"
                                :timestamp="activity.timestamp"
                            >
                                {{ activity.content }}
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </div>
                <div class="right">
                    <div class="model">
                        <el-tag type="success" effect="dark">匹配模式</el-tag>
                        <el-tag v-if="currentDetail.type == 0" type="" effect="dark">图文咨询</el-tag>
                        <el-tag v-if="currentDetail.type == 1" type="" effect="dark">电话咨询</el-tag>
                        <el-tag v-if="currentDetail.type == 2" type="" effect="dark">文书服务</el-tag>
                        <el-tag v-if="currentDetail.type == 3" type="" effect="dark">律师函</el-tag>
                        <el-tag v-if="currentDetail.type == 4" type="" effect="dark">案件委托</el-tag>
                        <el-tag v-if="currentDetail.type == 5" type="" effect="dark">企业服务</el-tag>
                        <el-tag v-if="currentDetail.tag_name" type="warning" effect="dark">{{ currentDetail.tag_name }}</el-tag>
                    </div>
                    <div class="desc">
                        <h3>咨询描述</h3>
                        <div>{{ currentDetail.description }}</div>
                    </div>
                    <div v-if="currentDetail.type == 2">
                        <h3 v-if="currentDetail.server_type == 0">服务类型:无</h3>
                        <h3 v-if="currentDetail.server_type == 1">服务类型:文书定制</h3>
                        <h3 v-if="currentDetail.server_type == 2">服务类型:合同审查/修改</h3>
                        <h3 v-if="currentDetail.server_type == 3">服务类型:案件指导</h3>
                        <h3 v-if="currentDetail.server_type == 4">服务类型:其他</h3>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!--<el-button @click="detailDialogClose">取 消</el-button>-->
                <el-button type="primary" @click="detailDialogClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getTagList } from '@/api/lawyerApi'
import { getOrderList, getOrderDetail } from '@/api/orderApi'
import { diffTime } from '@/util/index'
export default {
    name: 'ConsultingOrder',
    data() {
        return {
            detailDialog: false,
            activities: [{
                content: '用户下单',
                timestamp: '2018-04-12 20:46',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-check'
            }],
            serveTime: '',
            search: {
                ordersn: '',
                mobile: '',
                joinTime: [],
                source: '6',
                type: '6',
                tag_ids: [],
                description: '',
                status: '6'
            },
            tagList: [],
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 100,
            pageSizes: [5, 10, 15, 20],
            currentDetail: {}
        }
    },
    created() {
        this.$SpinkitLoading({type: 'chase', size: 50, color: '#fff'})
        this._getTagList() // 获取用户标签
        this._getOrderList() // 获取订单列表(待确认)
    },
    methods: {
        changeTag(val) {
            console.log(val)
        },
        changeTime(val) {
            this.$nextTick(() => {
                if (val == null) {
                    this.search.joinTime = []
                }
            })
        },
        async _getOrderList() {
            console.log(this.search)
            let data = {
                p: this.currentPage,
                length: this.pageSize,
                status: this.search.status == 6 ? '' : this.search.status,
                ordersn: this.search.ordersn,
                mobile: this.search.mobile,
                start_time: this.search.joinTime[0] || '',
                end_time: this.search.joinTime[1] || '',
                source: this.search.source == 6 ? '' : this.search.source,
                type: this.search.type == 6 ? '' : this.search.type,
                tag_ids: this.search.tag_ids,
                description: this.search.description
            }
            const res = await getOrderList(data)
            console.log(res)
            this.tableData = res.data.list
            this.total = res.data.total
            this.$SpinkitLoading.close()
        },
        async _getTagList() {
            const res = await getTagList()
            console.log(res)
            this.tagList = res.data.list.reverse()
            this.$SpinkitLoading.close()
        },
        // 分页 2 个方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.pageSize = val
            this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            this._getOrderList() // 获取订单列表(待确认)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.currentPage = val
            this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            this._getOrderList() // 获取订单列表(待确认)
        },
        detailDialogClose() {
            this.$nextTick(() => {
                this.detailDialog = false
                this.activities = [{
                    content: '用户下单',
                    timestamp: '2018-04-12 20:46',
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-check'
                }]
                this.serveTime = ''
            })
        },
        async handleClick(row, index) {
            console.log(row, index)
            this.detailDialog = true
            const res = await getOrderDetail({id: row.id})
            console.log(res)
            this.currentDetail = res.data.list
            let payType = '余额'
            if (this.currentDetail.paytype == 2) {
                payType = '支付宝'
            } else if (this.currentDetail.paytype == 3) {
                payType = '微信'
            }
            if (this.currentDetail.paytime) {
                this.activities.push({
                    content: `用户支付- ${payType} - ${this.currentDetail.price}`,
                    timestamp: this.currentDetail.paytime,
                    color: '#0bbd87'
                })
            }
            if (this.currentDetail.take_time) {
                this.activities.push({
                    content: `${this.currentDetail.team_name} 已接单`,
                    timestamp: this.currentDetail.take_time,
                    color: '#0bbd87'
                })
            }
            if (this.currentDetail.finish_time) {
                // console.log(this.$dayjs(this.currentDetail.finish_time).valueOf() - this.$dayjs(this.currentDetail.take_time).valueOf())
                console.log(this.$dayjs(this.currentDetail.finish_time).diff(this.$dayjs(this.currentDetail.take_time), 'seconds'))
                let seconds = this.$dayjs(this.currentDetail.finish_time).diff(this.$dayjs(this.currentDetail.take_time), 'seconds') * 1000 // 相差毫秒数
                this.serveTime = diffTime(seconds)
                console.log(this.serveTime)
                this.activities.push({
                    content: '完成时间',
                    timestamp: this.currentDetail.finish_time,
                    color: '#0bbd87'
                })
            }
            if (this.currentDetail.summary_time) {
                this.activities.push({
                    content: '总结时间',
                    timestamp: this.currentDetail.summary_time,
                    color: '#0bbd87'
                })
            }
            if (this.currentDetail.close_time) {
                this.activities.push({
                    content: '订单已关闭',
                    timestamp: this.currentDetail.close_time,
                    color: '#0bbd87'
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">
    .over-hidden {
        display: flex;
        align-items: center;
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .info {
            .top {
                display: flex;
                align-items: center;
            }
            .bot {
                font-size: 12px;
                color: #909399;
            }
        }
    }
    .dialog-title {
        font-weight: 800;
    }
    .det-content {
        display: flex;
        .left {
            flex: 1;
            background-color: #f8f8fb;
            margin-right: 20px;
            padding: 10px 0;
            &-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .right {
            flex: 1;
            background-color: #f8f8fb;
            padding: 10px;
            .model {
                display: flex;
                justify-content: space-around;
            }
        }
    }
</style>
